<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}
.list_title{padding-bottom: 30px;}
</style>

<template>
  <div>
      <template v-if="routerPath=='servicecharge'" >
        <div v-loading="loading">
        <div class="list_title">规则列表</div>
    
        <!-- table start  -->
        <el-table :data="list" style="width: 100%">
          <el-table-column width="37">
            <template scope="scope">
              <img src="../assets/img/sysFile.gif">
            </template>
          </el-table-column> 
          <el-table-column label="ID"     type="index"    width="60">
          </el-table-column>
          <el-table-column prop="userName" label="名称" >
          </el-table-column>
          <el-table-column prop="loginName" label="规则描述" width="200">
          </el-table-column>
              
          <el-table-column prop="certNo" label="奖金方式">
          </el-table-column>
          <el-table-column prop="userMail" label="币种信息">
          </el-table-column>
          <el-table-column prop="userMail" label="分拥成熟" width="124">
          </el-table-column>
          <el-table-column prop="userMail" label="分拥率" width="128">
          </el-table-column>
          <el-table-column prop="userMail" label="币种信息">
          </el-table-column>
           <el-table-column prop="userGender" label="状态" >
            <template slot-scope="scope">
              <span v-if="scope.row.userGender==1" >启用</span>
              <span v-if="scope.row.userGender==2" class="span_red">禁用</span>
            </template>
          </el-table-column>
          <el-table-column prop="userMail" label="创建时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
       
              <span class="span_btn" v-if="isEdit"  @click="handleEdit(scope.$index, scope.row)" >编辑</span>
             
            </template>
          </el-table-column>
        </el-table>
          <!--工具条-->
        <!-- <el-col :span="24" class="toolbar toolbar_footer">
          <el-pagination v-if="total" background layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
          </el-pagination>
        </el-col> -->
        <!-- table end  -->


         <!-- 编辑页面 -->
         <el-dialog title="修改配置" top="0" :modal="false" :lock-scroll="false" class="form_part form_param" :visible.sync="editFormVisible"  :close-on-click-modal="true">
          <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
              <el-form-item label="CODE:">
                <span class="form_text">TRADE_CONFIG_WITHDRAWALS_MIN_AMOUNT{{editForm.CODE}}</span>
              </el-form-item>
              <el-form-item label="配置名称:">
                <span class="form_text">{{editForm.CODE}}</span>
              </el-form-item>
              <el-form-item label="配置描述:" prop="nickName">
                <el-input type="textarea" v-model="editForm.desc"></el-input>
              </el-form-item>
              <el-form-item label="配置值:" prop="nickName">
                <el-input v-model="editForm.nickName" auto-complete="off"></el-input>
              </el-form-item>                  
              <el-form-item class="dialog-footer">
                  <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">提交</el-button>
                  <el-button type="primary" @click.native="editFormVisible = false">取消</el-button>

              </el-form-item> 
 
          </el-form>
       
        </el-dialog>
      </div>
      </template>
       <template v-else>
        <router-view></router-view>
      </template>
  </div>

  
  
</template>

<script>
import * as users from '../api/users';
import isvalidPhone from '../api/valide';
import qs from 'qs';
import md5 from 'js-md5';

let myMixin = {
  data: function() {
    return { users }
  }
}
var validPhone=(rule, value,callback)=>{
      if (!value){
          callback(new Error('请输入电话号码'))
      }else  if (!isvalidPhone.isvalidPhone(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else {
          callback()
      }
  }
export default {
  mixins: [myMixin],
  data() {
    return {

      isDel:true,
      isEdit:true,
      isReleRole:true,
      isReleGroup:true,
      total: 10,
      page: 1,
      showCount:10,
      routerPath:'',
      addFormVisible:false,//新增页面是否显示,
      editFormVisible:false,//编辑界面是否显示
      editForm:{},//编辑页面数据

      editFormRules:{
        userName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
        userGender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        loginName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
         loginPass: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        phoneNum: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        userMail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        certNo: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ]
      },
      addLoading:false,//
      editLoading:false,//
      list: [
        { userName:"test",
          userGender:1,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
        },
        { userName:"test",
          userGender:1,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
        }
      ],
      canReset: true,
      loading: false,
      groupId:'',//组id
      userId:''//用户id
    }
  },
  methods: {
 
    handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
      this.fetchData();
    },

    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
     /* this.userId=row.userId;
        let para={
        userId:row.userId
       }
        users.info.r(para).then((res) => {
          if(res.data.retCode==1){
              this.editForm=res.data.data;
              this.editForm.loginPass="***";
              

          }else{
            this.$message(res.data.retMsg);
          }              
      })*/
    },

 
    editSubmit:function(){
      //编辑数据提交
      this.$refs.editForm.validate((valid) => {
          if (valid) {
             let para = {
              userId:this.userId,
              nickName:this.editForm.nickName,
              userName:this.editForm.userName,

              loginName:this.editForm.loginName,
              // loginPass:this.editForm.loginPass,
              userMail:this.editForm.userMail,
              phoneNum:this.editForm.phoneNum,
              certNo:this.editForm.certNo,
              userGender:this.editForm.userGender.toString()
           
            };
            // console.log(qs.stringify(para));
            // return;
            users.modify.r(para).then((res) => {
              if(res.data.retCode==1){
                //编辑用户成功
                this.editFormVisible = false;

                this.fetchData();
              }else{
                this.$message(res.data.retMsg);
              }
              
            });
          }else{
            console.log('error submit!!');
            return false;
          }
      })
    },

    fetchData(init) {
      this.loading = true;
      if(!this.$_has([users.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }
      let para = {
          // groupId:this.groupId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
          keyword:this.filters.name
        };
        if(this.groupId!=undefined&&this.groupId!="undefined"&&this.groupId!=""){
          this.$set(para,'groupId',this.groupId)
        }
      users.request.r(para).then((res) => {
        this.total=res.data.data.totalRow;
        this.list = res.data.data.list;
        
        if(this.list!=null){
          this.list.map(x=>{
            this.$set(x,'showIndex',2)  
            this.$set(x,'showClose',false)       
            this.$set(x,'showCloseG',false)       
            this.$set(x,'showIndexG',2)         
          })
        }

        this.loading = false;
      });
    },
    requestNotAllowed: function(){
      users.notAllowed.r();
    }
  },
  watch: {
          // 如果路由有变化，会再次执行该方法
          "$route": function(){
            this.routerPath=this.$route.path.split("/").pop();
            this.groupId="";
            this.fetchData(true)

          }
  },
  created() {
   /* this.isReleRole=this.$_has([users.releRolesUser]);
    this.isReleGroup=this.$_has([users.releGroupUser]);
    this.isEdit=this.$_has([users.modify]);
    this.isDel=this.$_has([users.remove]);
    if(this.$route.query.groupId!=undefined&&this.$route.query.groupId!="undefined"&&this.$route.query.groupId!=""){
      this.groupId=this.$route.query.groupId;
    }

    this.fetchData(true)*/
    /*console.log(this.$route.path.split("/").pop())*/
    this.routerPath=this.$route.path.split("/").pop();
    

  }
}
</script>